<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    @if($isauth == 0)
    <title>(>_<｡)</title>
    @else
    <title>≖‿≖✧</title>

    @endif
    <link rel="stylesheet" href="/frozenui-1.3.0/css/frozen.css">
    <link rel="stylesheet" href="/css/animate.css"/>
    <style>
        .tucao-border-style {
            /*border: 50px;*/
            /*-webkit-border-image:url('/image/borderImg.png') 300 300 round;*/
            /*border-top-image: url('/image/borderImg.png') 300 300 round;*/
            /*-webkit-border-left-image:url('/image/borderImg.png') 300 300 round;*/
            /*border-top-image: url('/image/borderImg.png') 300 300 round;*/
            /*background: #fffdef;*/
            background: #000000;

        }
    </style>
</head>
<body ontouchstart="">
@if($isauth == 0)
<!--未认证-->
<section class="ui-notice">
    <i></i>

    <p>对不起，这里只有正式员工能来哦<br/>
        如果你就是正式员工，请进行认证！</p>
</section>

@else
<!--正式内容-->
<footer class="ui-footer ui-footer-btn">
    <section class="ui-input-wrap ui-border-t">
        <div class="ui-input ui-border-radius">
            <input type="text" class="tucao_content" value="" placeholder="我也吐一个槽...">
            <input type="hidden" class="nickname" value="{{$nickname}}"/>
            <input type="hidden" class="sex" value="{{$sex}}"/>
            <input type="hidden" class="openid" value="{{$openid}}"/>
            <input type="hidden" class="headimgurl" value="{{$headimgurl}}"/>
        </div>
        <button class="ui-btn submit_tucao">吐槽</button>
    </section>
</footer>
<div class="tucao-border-style">
    <section class="ui-container ui-center" id="word-cloud">

    </section>
</div>

@endif
<script src="/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="/frozenui-1.3.0/js/frozen.js"></script>
<script src="/js/d3.js"></script>
<script src="/js/d3.layout.cloud.js"></script>

<script>
    var win_height = $(window).height()

    var height = win_height - $('.ui-footer').height();
    $('.tucao-border-style').css({height:height});

    var el;
    var tucao_content = $('.tucao_content').val();
    var nickname = $('.nickname').val();
    var sex = $('.sex').val();
    var openid = $('.openid').val();
    var headimgurl = $('.headimgurl').val();
    var times = $('.times').val();

    $.ajax({
        type: 'POST',
        url: "{{route('tucao.store')}}",
        data: {'tucao_content': tucao_content, '_token': "{{csrf_token()}}", 'openid': openid, 'sex': sex, 'nickname': nickname, 'headimgurl': headimgurl},
        dataType: 'json',


        success: function (res) {
            // 加载D3 WORD CLOUD

            wordCloud(res);
            $('#word-cloud').addClass('animated rotateIn');
        }
    });


    $('.submit_tucao').on('tap', function () {
        var el;
        var tucao_content = $('.tucao_content').val();
        var nickname = $('.nickname').val();
        var sex = $('.sex').val();
        var openid = $('.openid').val();
        var headimgurl = $('.headimgurl').val();
        var times = $('.times').val();

        $.ajax({
            type: 'POST',
            url: "{{route('tucao.store')}}",
            data: {'tucao_content': tucao_content, '_token': "{{csrf_token()}}", 'openid': openid, 'sex': sex, 'nickname': nickname, 'headimgurl': headimgurl},
            dataType: 'json',
            beforeSend: function (xhr, settings) {


                if($('.tucao_content').val().trim().length == 0) {
                    $.tips({
                        content: '哼哼哼，空吐槽？！~',
                        stayTime: 2000,
                        type: "warn"
                    })
                    return false;
                }

                el = $.loading({
                    content: '吐槽中...'
                })

                $('#word-cloud').removeClass('animated rotateIn');
                $('#word-cloud').addClass('animated fadeOut');
            },

            success: function (res) {
                el.loading("hide");

                if (res == false) {
                    $.tips({
                        content: '哎呀呀，吐槽失败了~',
                        stayTime: 2000,
                        type: "warn"
                    })
                    return false;
                }

                $('.tucao_content').val('');
                $.tips({
                    content: '木哇，吐槽成功!~',
                    stayTime: 2000,
                    type: "success"
                })

                // 加载D3 WORD CLOUD
                wordCloud(res);
                $('#word-cloud').removeClass('animated fadeOut');
                $('#word-cloud').addClass('animated fadeIn');
            }
        });
    })




function wordCloud(res) {
    var win_height = $(window).height()
    var width = $('#word-cloud').width(),
        height = win_height - $('.ui-footer').height();


    var leaderScale = d3.scale.linear().range([10,60]);



    var leaders = res.map(function(d) { return {text: d.content, size: +d.times} })
        .sort(function(a, b) { return d3.descending(a.size, b.size) })
        .slice(0, 1000);

    leaderScale.domain([
        d3.min(leaders, function(d) { return d.size }),
        d3.max(leaders, function(d) { return d.size })
    ]);

    var fill = d3.scale.category20();
    //d3.json("{{route('tucao.store')}}", function(data) {
//        var leaders = data
//            //.filter(function(d) { return +d.G >0;})
//            .map(function(d) {return {text: d.content, size: +d.times};})
//            .sort(function(a,b) { return d3.descending(a.size, b.size); })
//            .slice(0, 100);

        var layout = d3.layout.cloud()
            .size([width, height])
            .words(leaders)
            .padding(0)
            //.rotate(function () {
            //    return ~~(Math.random() * 2) * 90;
            //})
            .font("Gorditas")
            .fontSize(function (d) {
                return leaderScale(d.size);
            })
            .on("end", drawCloud);
   // $('#word-cloud').removeClass('animated fadeOut');
   // $('#word-cloud').addClass('animated rotateIn');
        layout.start();

    //});

    function drawCloud(words) {

        $('#word-cloud').html('');

        d3.select("#word-cloud").append("svg")
            .attr("width", layout.size()[0])
            .attr("height", layout.size()[1])
            .append("g")
            .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
            .selectAll("text")
            .data(words)
            .enter().append("text")
            .style("font-size", function (d) {
                return d.size + "px";
            })
            .style("font-family", "Gorditas")
            .style("fill", function (d, i) {
                return fill(i);
            })
            .attr("text-anchor", "middle")
            .attr("transform", function (d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function (d) {
                return d.text;
            });
    }
}
</script>
</body>
</html>